<template>
    <div class="container">
        <div class="navigation">
            <div class="group" v-for="(group, index) in props.lists" :key="index">
                <div class="group-header">{{
                    props.titles[index]
                }}</div>
                <div v-for="(item, jndex) in group" :key="jndex" class="item" @click="onNavigatin(item)"
                    :class="{ select: item.pathName === current?.pathName }">
                    <div> {{ item.title }}</div>
                </div>
            </div>
        </div>
        <div class="context">
            <RouterView></RouterView>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'

type PartType = {
    type: number,
    title: string;
    pathName: string,
}
const props = withDefaults(defineProps<{ lists?: PartType[][], titles?: string[] }>(), {
    lists: () => [],
    titles: () => ['初级', '中级', '高级']
})

const router = useRouter()

const current = ref<PartType>()

onMounted(() => {

})

const onNavigatin = (item: PartType) => {
    current.value = item;
    router.push({ name: current.value.pathName })
}

watch(() => props.lists, () => {
    current.value = (props.lists[0] || [])[0]
    current.value && onNavigatin(current.value)
}, { immediate: true, flush: 'post' })

</script>
    
<style scoped lang="less">
.container {
    height: 100%;
    display: flex;
    flex-direction: row;
}

.container .navigation {
    height: 100vh;
    min-width: 100px;
    padding: 10px;
    background-color: antiquewhite;
}

.container {
    .context {
        flex: 1;
    }
}

.navigation .group {
    padding-top: 10px;
}

.navigation .group:nth-of-type(1) {

    padding-top: 0px;
}

.group-header {
    font-size: 18px;
    font-weight: 600;
}


.navigation .item {
    color: black;
    /* margin: 10px; */
    height: 30px;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    padding-left: 8px;
}

.navigation .select {
    /* background-color: gray; */
    border-bottom: 1px solid gray;
    color: rgb(34, 88, 206);
}
</style>